<template>
  <DoughnutChartCustom
    :echartsData="echartsData"
    :color="color"
    :legendBottom="'1%'"
    :legendType="'scroll'"
    :seriesCenter="['50%', '45%']"
    :seriesRadius="['35%', '60%']"
    :seriesAttribute="seriesAttribute"
    :seriesMinAngle="2"
  />
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import DoughnutChartCustom from '@/components/echarts/doughnutChartCustom.vue';

const echartsData = ref();
const data = [
  {
    districtName: '未执行',
    unitNum: 55,
  },
  {
    districtName: '已执行',
    unitNum: 45,
  },
];
const color = [
  ['#F6B900', '#1BB1B1'],
  ['#1BB1B1', '#F6B900'],
];
const seriesAttribute = {
  padAngle: 2,
  itemStyle: {
    //图形样式
    normal: {
      borderColor: '#EAF5FF',
      borderWidth: 1,
    },
  },
  label: {
    //文本样式
    normal: {
      show: true, //开启显示
      formatter: '{d}% \n\n',
      padding: [0, -45],
      textStyle: {
        fontSize: 14, // 改变标示文字的大小
        color: '#fff',
      },
    },
  },
  labelLine: {
    show: true, //开启显示
    //指示线样式设置
    normal: {
      length2: 40, // 延长线长度
    },
  },
};
echartsData.value = data.map((item: any) => {
  return {
    name: item.districtName,
    value: item.unitNum,
  };
});

defineComponent({ name: 'BingToDemo' });
</script>

<style scoped lang="scss"></style>
